<template>
  <div>
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <!-- 头部 -->
        <div class="login-box">
          <div class="login-view">
            <div class="title">欢迎登录领导驾驶舱</div>
            <div class="line-view">
              <img src="../../assets/images/peple.webp" alt="">
              <input class="input" v-model="LabCode" type="text" placeholder="请输入实验室代码">
            </div>
            <div class="line-view">
              <img src="../../assets/images/email.png" alt="">
              <input type="text" v-model="Email" placeholder="请输入登录邮箱">
            </div>
            <div class="line-view">
              <img src="../../assets/images/lock.webp" alt="">
              <input type="password" v-model="Pwd" placeholder="请输入登录密码">
            </div>
            <div class="jizhu" @click="isTrue = !isTrue">
              <div class="kuang">
                <img v-if="isTrue" class="active" src="../../assets/images/checked.png" alt="">
              </div>
              <span>记住密码</span>
            </div>
            <div class="btn-view" @click="loginFun">
              登录
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onUnmounted, toRefs } from "vue"
import useDraw from "@/utils/useDraw"
import { title, subtitle, moduleInfo } from "@/constant/index"
import API from '@/common/api'
import jsCookie from 'js-cookie'
import { useToast } from 'vue-toastification'
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter()
    // 初始化一个 ref 用于存储 Toasted 实例
    const toast = useToast();
    // * 加载标识
    const loading = ref<boolean>(true)
    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
    const isTrue = ref(false)
    // LabCode: "18632",
    //   Email: "yangbo01@cnaf.com",
    //   Pwd: "yyzx24013"
    const data = reactive({
      LabCode: "",
      Email: "",
      Pwd: ""
    })
    // 生命周期
    onMounted(() => {
      const user = localStorage.getItem('user')
      if (user) {
        const oldUser = JSON.parse(user)
        data.LabCode = oldUser.LabCode
        data.Email = oldUser.Email
        data.Pwd = oldUser.Pwd
        isTrue.value = true
      }
      cancelLoading()
      // todo 屏幕适应
      windowDraw()
      calcRate()
    })

    onUnmounted(() => {
      unWindowDraw()
    })

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    }
    const loginFun = async () => {
      const { LabCode, Email, Pwd } = data
      toast.clear();
      if (!LabCode) {
        toast('请输入实验室代码');
        return
      }
      if (!Email) {
        toast('请输入登录邮箱');
        return
      }
      if (!Pwd) {
        toast('请输入登录密码');
        return
      }
      const res: any = await API.LoginByPwd(data)
      if (res.Tag) {
        if (isTrue.value) {
          localStorage.setItem('user', JSON.stringify(data))
        }
        jsCookie.set('userId', res.Data.Id)
        localStorage.setItem('info', JSON.stringify(res.Data))
        router.replace('/')
      } else {
        toast.clear();
        toast.error(res.Message);
      }
    }
    // return
    return {
      loginFun,
      loading,
      appRef,
      title,
      subtitle,
      moduleInfo,
      isTrue,
      ...toRefs(data)
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";

.bg {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/pageBg.jpg");
  background-size: cover;
  background-position: center center;
}

.login-box {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-view {
    height: 64vh;
    width: 90vw;
    background: url(../../assets//images//l-bg.jpg)no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .title {
      font-size: 1.2rem;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: #FFFFFF;
      margin-bottom: 0;
      padding: 0rem 0 1rem 0;
    }

    .line-view {
      position: relative;
      width: 80%;
      height: 2.8rem;
      display: flex;
      align-items: center;
      margin-bottom: 26px;

      img {
        position: absolute;
        width: 1rem;
        height: 1rem;
        left: 1rem;
      }

      input {
        &:focus {
          background-color: rgba(11, 161, 248, 0.8);
        }

        font-size: 16px;
        width: 100%;
        background-color: rgba(11, 161, 248, 0.4);
        border: 2px solid #0BA1F8;
        color: #ffffff;
        padding: 0.8rem 0.8rem 0.8rem 3rem;
      }
    }

    .jizhu {
      height: 25px;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      color: #ffffff;

      span {
        cursor: pointer;
      }

      .kuang {
        cursor: pointer;
        margin-right: 10px;
        width: 22px;
        height: 22px;
        border: 2px solid rgba(11, 161, 248, 0.4);

        .active {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

    }

    .btn-view {
      &:hover {
        background: #14abf7c3;
      }

      transition: background 0.3s;
      cursor: pointer;
      font-size: 1rem;
      color: #ffffff;
      letter-spacing: 10px;
      width: 80%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 3rem;
      background: #14AAF7;
    }
  }
}

*::-webkit-input-placeholder {
  color: #ffffff;
}

*:-moz-placeholder {
  /* FF 4-18 */
  color: #ffffff;
}

*::-moz-placeholder {
  /* FF 19+ */
  color: #ffffff;
}

*:-ms-input-placeholder {
  /* IE 10+ */
  color: #ffffff;
}
</style>
